<template>
	<view class="address-warp page-bg content-20">
		<view class="form-wrap">
			<view class="form-group">
				<view class="form-group__title">收货人姓名</view>
				<view class="form-group__con">
					<input class="form-group__from" name='realName' v-model="realName" type="text" placeholder="请输入收货人姓名" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="form-group">
				<view class="form-group__title">手机号码</view>
				<view class="form-group__con">
					<input class="form-group__from" name='phoneNumber' v-model="phoneNumber" type="number" maxlength="11" placeholder="请输入手机号码" placeholder-class="placeholder" />
				</view>
			</view>
			
			<view class="form-group">
				<view class="form-group__title">选择地址</view>
				<view class="form-group__con form-group__address" name='address' @tap="handleTap('picker3')">
					{{address}}
				</view>
			</view>
			<view class="form-group">
				<view class="form-group__title">详细地址</view>
				<view class="form-group__con">
					<input class="form-group__from " v-model="addressInfo" type="text" placeholder="请输入详细地址" placeholder-class="placeholder" />
				</view>
			</view>
			
			<!-- 地址选择器 -->
			<lb-picker ref="picker3"
			  v-model="value3"
			  mode="multiSelector"
			  :list="list"
			  :level="3"
			  @confirm="handleConfirm"
			  >
			</lb-picker>
		</view>
		
		<view class="line-info">
			<view class="line-info__title">设为默认地址</view>
			<switch class="btn-switch" name='isDefault' :checked="isDefault" @change="setDefaultAddress" color="#CFA972" />
		</view>
		
		<view class="circular-submit"  @click="formSubmit">保存</view>
	</view>
</template>

<script>
	import list from '../../utils/area-data-min.js'
	import { api } from '../../utils/api.js'
	import  common  from '../../utils/common.js'
	
	export default{
		data() {
			return{
				value3: [],
				list: list,
				realName: '', // 收货人姓名
				phoneNumber: '', // 手机号码
				address: '', // 详细地址
				addressInfo: '',
				isDefault: false, // boolean 是否默认
				id: ''
			}
		},
		onLoad() {
			let item = common.getStorage('editAddress')
			if(item) {
				this.realName = item.realName
				this.phoneNumber = item.phoneNumber
				this.address = (item.address).split('&&')[0]
				this.addressInfo = item.address.split('&&')[1]
				this.isDefault = item.isDefault
				this.id = item.id 
			}
		},
		methods:{
			handleTap (picker) {
				this.$refs[picker].show()
			},
			
			handleConfirm(res) {
				let item = res.item
				this.address = item[0]['label'] +item[1]['label'] + item[2]['label']
			},
			
			setDefaultAddress() {
				this.isDefault = !this.isDefault
				console.log(this.isDefault)
			},
			
			formSubmit() {
				let { realName, phoneNumber, address, addressInfo, isDefault, id } = this.$data
				console.log(realName)
				if(!realName) { this.$showToast('请输入收货人姓名~'); return }
				if(!phoneNumber) { this.$showToast('请输入收货人号码~'); return }
				if(!common.isPhone(phoneNumber)) { this.$showToast('请输入11位手机号码~'); return }
				if(!address) { this.$showToast('请选择收货地址~'); return }
				if(!addressInfo) { this.$showToast('请输入详细地址~'); return }
				address = address + '&&' + addressInfo
				if(!id) { id = common.defaultId }
				api.saveAddressSaync({realName, phoneNumber, address, isDefault, id}, () => {
					this.$showToast('收货地址保存成功~')
					uni.removeStorageSync('editAddress')
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.form-wrap{
		.br;
	}
	.line-info{
		.br;
		background-color: @f;
		height: 100rpx;
		.flex-base;
		margin: 20rpx 0 50rpx 0;
		padding: 0 20rpx;
		box-sizing: border-box;
		.line-info__title{
			.f28;
		}
		.btn-switch{
			
		}
	}
</style>
